<template>
    <div class="boxs">
        <el-card>
            <el-form :model="queryParams" ref="queryForm" :inline="true">
                <el-form-item :label="$t('commentList.language')">
                    <el-select v-model="queryParams.reviewer_language" @change="handleQuery">
                        <el-option v-for="item in languageList" :key="item.id" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('commentList.StarRating')" v-if="starType == 1 || starType == 3">
                    <el-select v-model="queryParams.star_rating" @change="handleQuery">
                        <el-option v-for="item in starList" :key="item.id" :label="item.name"
                            :value="item.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('commentList.APPVersion')">
                    <el-select v-model="queryParams.app_version_name" @change="handleQuery">
                        <el-option v-for="item in versionList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('commentList.templateType')">
                    <el-select v-model="queryParams.type_id" @change="handleQuery">
                        <el-option v-for="item in templateTypeList" :key="item.id" :label="item.comment_type"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('commentList.Commenttime')">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        :start-placeholder="$t('table.start')" :end-placeholder="$t('table.end')" @change="timeChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="small"
                        @click="handleQuery">{{ $t('table.search') }}</el-button>
                    <el-button icon="el-icon-refresh" size="small"
                        @click="resetQuery">{{ $t('table.reset') }}</el-button>
                </el-form-item>
            </el-form>
            <div class="flex_between">
                <div></div>
                <el-button type="warning" icon="el-icon-download" size="small"
                    @click="handleExport">{{ $t('table.export') }}</el-button>
            </div>
            <el-table border stripe :data="moreArr" style="margin-top: 15px" v-loading="loading" show-overflow-tooltip>
                <el-table-column label="index" align="center" width="60" type="index" />
                <el-table-column :label="$t('commentList.Commenttime')" show-overflow-tooltip align="center"
                    prop="last_modified" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.last_modified }}
                    </template>
                </el-table-column>
                <el-table-column show-overflow-tooltip width="60" :label="$t('commentList.StarRating')" align="center"
                    prop="star_rating">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.star_rating == '1'">1</el-tag>
                        <el-tag type="warning" v-if="scope.row.star_rating == '2'">2</el-tag>
                        <el-tag type="info" v-if="scope.row.star_rating == '3'">3</el-tag>
                        <el-tag v-if="scope.row.star_rating == '4'">4</el-tag>
                        <el-tag type="success" v-if="scope.row.star_rating == '5'">5</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('commentList.CommentContent')" show-overflow-tooltip align="center"
                    prop="content" />
                <el-table-column :label="$t('commentList.ReplyContent')" show-overflow-tooltip align="center"
                    prop="reply_content" v-if="starType == 3 || starType == 4" />
                <el-table-column :label="$t('commentList.templateType')" show-overflow-tooltip align="center"
                    prop="type_name" v-if="starType == 3 || starType == 4" />
                <el-table-column :label="$t('commentList.CommentUser')" show-overflow-tooltip align="center"
                    prop="author_name" v-if="starType == 3 || starType == 4" />

                <el-table-column :label="$t('commentList.Androidversion')" width="80" show-overflow-tooltip
                    align="center" prop="android_os_version" v-if="starType == 3 || starType == 4" />
                <el-table-column :label="$t('commentList.AppVersionCode')" width="110" show-overflow-tooltip
                    align="center" prop="app_version_code" v-if="starType == 3 || starType == 4" />
                <el-table-column :label="$t('commentList.APPVersion')" width="110" show-overflow-tooltip align="center"
                    prop="app_version_name" />
                <el-table-column :label="$t('commentList.DeviceDetail')" show-overflow-tooltip width="120"
                    align="center" prop="device" v-if="starType == 3 || starType == 4">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showDevuce(scope.row)">
                            {{ scope.row.device }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('commentList.language')" width="90" show-overflow-tooltip align="center"
                    prop="reviewer_language" />
                <el-table-column :label="$t('commentList.PackageName')" show-overflow-tooltip align="center"
                    prop="package_name" v-if="starType == 3 || starType == 4" />
                <el-table-column :label="$t('commentList.IsMark')" width="110" show-overflow-tooltip align="center"
                    prop="mark">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.mark == '0'">{{ $t('commentList.notmarked') }}</el-tag>
                        <el-tag type="success" v-if="scope.row.mark == '1'">{{ $t('commentList.marked') }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('commentList.ReplyStatus')" width="110" show-overflow-tooltip align="center"
                    prop="is_reply">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.is_reply == '0'">{{ $t('commentList.noreply') }}</el-tag>
                        <el-tag type="success" v-if="scope.row.is_reply == '1'">{{ $t('commentList.replied') }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('commentList.updateTime')" show-overflow-tooltip align="center"
                    prop="update_date" width="160">
                    <template slot-scope="scope">
                        {{ scope.row.update_date }}
                    </template>
                </el-table-column>
                <el-table-column :label="$t('commentList.operate')" align="center" fixed="right" width="100"
                    v-if="starType == 1">
                    <template slot-scope="scope">
                        <el-button size="mini"
                            @click="handleEdit(scope.$index, scope.row)">{{ $t("commentList.Reply") }}</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.page" :limit.sync="queryParams.size"
                @pagination="getMore" />
        </el-card>

        <el-dialog :title="$t('commentList.operate')" :visible.sync="dialogVisible" width="40%">
            <el-form class="demo-form-inline" label-width="140px" :model="form" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.StarRating')" prop="star_rating">
                            <el-input disabled v-model="form.star_rating" :placeholder="$t('commentList.StarRating')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.language')">
                            <el-input disabled v-model="form.reviewer_language"
                                :placeholder="$t('commentList.language')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('commentList.CommentContent')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="form.content"
                                :placeholder="$t('commentList.CommentContent')" resize="none" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <div class="flex_">
                            <el-form-item :label="$t('commentList.Translate')">
                                <el-select v-model="goalLanguage">
                                    <el-option v-for="item in languageList" :key="item.id" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-button style="margin-bottom: 22px" :loading="translateLoading" @click="translateHandel"
                                type="primary">{{ $t('commentList.Translate') }}</el-button>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('commentList.TranslateContent')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="languageContent"
                                :placeholder="$t('commentList.TranslateContent')" resize="none" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.IsMark')">
                            <el-select v-model="form.mark" style="width: 100%">
                                <el-option key="0" :label="$t('commentList.notmark')" value="0"></el-option>
                                <el-option key="1" :label="$t('commentList.mark')" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.ReplyType')" prop="type_id">
                            <el-select v-model="form.type_id" style="width: 100%" @change="chagngCommentType($event)">
                                <el-option v-for="item in templateTypeList" :key="item.id" :label="item.comment_type"
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="templateContentList.length != 0">
                        <el-form-item :label="$t('commentList.ReplyTemplate')" prop="template_content_id">

                            <el-select v-model="form.template_content_id" style="width: 100%" @focus="setOptionWidth"
                                popper-class="my-select" @change="setReply_content">
                                <el-option v-for="item in templateContentList" :key="item.id"
                                    :label="item.template_content" :value="item.id"
                                    :style="{ width: selectOptionWidth }"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('commentList.ReplyContent')">
                            <el-input :autosize="{ minRows: 4 }" type="textarea" disabled v-model="form.reply_content"
                                :placeholder="$t('commentList.ReplyContent')" resize="none" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{ $t('tagsView.close') }}</el-button>
                <el-button :loading="addLoading" v-hasRole="['admin', 'middle', 'primary', 'manage','review']"
                    :type="form.id ? 'warning' : 'primary'" @click="affirm">{{
                        form.id ? $t('table.confirm') : "确认添加"
                    }}</el-button>
            </div>
        </el-dialog>
        <el-dialog :title="$t('commentList.DeviceDetail')" :visible.sync="dialogVisibleDevice" width="46%">
            <el-form class="demo-form-inline" label-width="140px" :model="form" :rules="rules" ref="ruleForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.ReviewId')" prop="reviewId">
                            <el-input disabled v-model="form.review_id" :placeholder="$t('commentList.ReviewId')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.CommentUser')">
                            <el-input disabled v-model="form.author_name"
                                :placeholder="$t('commentList.CommentUser')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.Androidversion')" prop="name">
                            <el-input disabled v-model="form.android_os_version"
                                :placeholder="$t('commentList.Androidversion')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.AppVersionCode')">
                            <el-input disabled v-model="form.app_version_code"
                                :placeholder="$t('commentList.AppVersionCode')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.APPVersion')" prop="name">
                            <el-input disabled v-model="form.app_version_name"
                                :placeholder="$t('commentList.APPVersion')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.Device')">
                            <el-input disabled v-model="form.device" :placeholder="$t('commentList.Device')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.StarRating')" prop="name">
                            <el-input disabled v-model="form.star_rating" :placeholder="$t('commentList.StarRating')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item :label="$t('commentList.language')">
                            <el-input disabled v-model="form.reviewer_language"
                                :placeholder="$t('commentList.language')" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item :label="$t('commentList.DeviceDetail')">
                            <el-input autosize type="textarea" disabled v-model="textarea"
                                :placeholder="$t('commentList.DeviceDetail')" resize="none" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleDevice = false">{{ $t('tagsView.close') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { addTests, getTests, upTests, delTests } from "@/api/tests";
import {
    getDataList,
    getLanguage,
    getVersion,
    getDataListAll,
    gptTranslate,
    replyComment,
    getTemplateTypeList,
    selectTemplate,
    respondBasedOnContext,
    getTemplateTypeById
} from "@/api/appComment";
import { getToken, setToken, removeToken } from "@/utils/auth";

import * as XLSX from "xlsx";
export default {
    name: "commentList",
    data() {
        return {
            selectOptionWidth: null,
            template_content_id: "",//模板id
            reply_content: "",//回复内容
            is_mark: "0",
            comment_type: "",
            goalLanguage: "zh_CN",
            languageContent: "",
            textarea: "",
            starType: "",
            queryParams: {
                page: 1,
                size: 10,
                dateRange: {
                    start: "",
                    end: "",
                },
                reviewer_language: "",
                star_rating: "",
                app_version_name: "",
            },
            value1: "",
            total: 0,
            loading: false,
            addLoading: false,
            moreArr: [],
            dialogVisible: false,
            dialogVisibleDevice: false,
            translateLoading: false,
            form: {
                name: "",
                remark: "",
            },
            languageList: [],
            versionList: [],
            starList: [
                {
                    id: "1",
                    name: "1",
                },
                {
                    id: "2",
                    name: "2",
                },
                {
                    id: "3",
                    name: "3",
                },
                {
                    id: "4",
                    name: "4",
                },
            ],
            markList: [
                {
                    id: "0",
                    name: "否",
                },
                {
                    id: "1",
                    name: "是",
                },
            ],
            commentTypeList: [
                {
                    id: "0",
                    name: "否",
                },
                {
                    id: "1",
                    name: "是",
                },
            ],
            templateContentList: [],
            type_name: '',
            rules: {
                type_id: [
                    { required: true, message: "Please enter template_type", trigger: "blur" },
                ],
                template_content_id: [{ required: true, message: "Please enter template", trigger: "blur" }],
            },
        };
    },
    created() {
        const { index, package_name } = this.$route.query;
        this.setQueryParams(index, package_name);
        this.getLanguageList();
        this.getVersionList();
        this.getTemplateTypeListHandel();
    },
    methods: {
        setReply_content() {
            let find = this.templateContentList.find(item => item.id == this.form.template_content_id)
            this.form.reply_content = find.template_content
        },
        setOptionWidth(event) {
            this.$nextTick(() => {
                this.selectOptionWidth = event.srcElement.offsetWidth + 'px';
            });
        },
        async chagngCommentType(e) {
            this.type_name = this.templateTypeList.find(x => x.id == e).comment_type

            let query = {
                page: 1,
                size: 999,
                package_name: this.queryParams.package_name,
                type_id: this.form.type_id,
                reviewer_language: this.form.reviewer_language,
            };
            let { data } = await selectTemplate(query);
            this.templateContentList = data;
        },
        async getTemplateTypeListHandel() {
            let query = {
                page: 1,
                size: 999,
                package_name: this.queryParams.package_name,
            };
            let { data } = await getTemplateTypeList(query);
            this.templateTypeList = data;

        },
        async translateHandel() {
            this.languageContent = "";
            this.translateLoading = true;
            let { data } = await gptTranslate({
                language: this.goalLanguage,
                translateText: this.form.content,
            });
            this.translateLoading = false;
            if (data.code == 0) {
                this.languageContent = data.data.answer;
            }
        },
        showDevuce(row) {
            let data1 = JSON.parse(row.device_metadata);
            let formattedData = JSON.stringify(data1, null, 2);
            this.textarea = formattedData;
            this.form = row;
            this.dialogVisibleDevice = true;
        },
        timeChange() {
            this.queryParams.dateRange.start = this.value1[0];
            this.queryParams.dateRange.end = this.value1[1];
            this.handleQuery();
        },
        setQueryParams(index, package_name) {
            this.starType = index;
            this.queryParams.package_name = package_name;

            this.queryParams.is_reply = index == 1 || index == 2 ? 0 : 1;

            this.queryParams.is_five = index == 2 || index == 4 ? 1 : 0;
            this.getMore();
        },
        async getMore() {
            this.loading = true;
            let { data, total } = await getDataList(this.queryParams);

             
            this.loading = false;
            this.moreArr = data;
            this.total = total;
        },
        handleQuery() {
            this.queryParams.page = 1;
            this.getMore();
        },
        resetQuery() {
            this.queryParams.type_id = null;
            this.queryParams.reviewer_language = null;
            this.queryParams.star_rating = null;
            this.queryParams.app_version_name = null;
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.queryParams.page = 1;
            this.value1 = "";
            this.getMore();
        },
        async affirm() {
        
            this.form.type_name = this.type_name

            this.$refs["ruleForm"].validate(async (valid) => {
                if (!valid) return;
                try {
                    this.form.token = getToken()
                    this.addLoading = true;
                    await respondBasedOnContext(this.form)
                    this.addLoading = false;
                    this.$message.success(this.form.id ? "提交成功！" : "提交成功！");
                    this.getMore();
                    this.dialogVisible = false;
                } catch (e) {
                    this.addLoading = false;
                    this.dialogVisible = false;

                }
            });
        },
        openDialog() {
            this.form = {};
            this.dialogVisible = true;
        },
        handleEdit(i, row) {
            this.languageContent = "";
            this.comment_type = ''
            this.templateContentList = []
            this.form = { ...row };
            this.dialogVisible = true;
        },
        async getLanguageList() {
            let { data } = await getLanguage({
                package_name: this.queryParams.package_name,
            });
            this.languageList = data.map((item) => ({
                id: item.reviewer_language,
                name: item.reviewer_language,
            }));
        },
        async getVersionList() {
            let { data } = await getVersion({
                package_name: this.queryParams.package_name,
            });
            this.versionList = data
                .filter((item) => item.app_version_name)
                .map((item) => ({
                    id: item.app_version_name,
                    name: item.app_version_name,
                }));
        },

        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该测试账号, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "error",
            }).then(async () => {
                await delTests({ id: row.id });
                this.getMore();
                this.$message({
                    message: "删除成功！",
                    type: "success",
                });
            });
        },
        async handleExport() {
            this.loading = true;
            let { data } = await getDataListAll(this.queryParams);
            const ws = XLSX.utils.json_to_sheet(data); // 将JSON转换成sheet
            const wb = XLSX.utils.book_new(); // 新建workbook
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 在workbook中添加新的sheet
            XLSX.writeFile(wb, "MySpreadsheet.xlsx"); // 写文件并触发下载
            this.loading = false;
        },
    },
};
</script>
<style lang="scss" scoped>
.boxs {
    padding: 20px;
}

.el-form-item {
    margin-right: 20px;
}

::v-deep.el-input.is-disabled .el-input__inner {
    color: #333 !important;
}

::v-deep.el-textarea.is-disabled .el-textarea__inner {
    color: #333 !important;
}

.my-select .el-select-dropdown__item {
    overflow: visible;
    display: block;
}
</style>